<!-- subpkg_consult/order_list/index.vue -->
<script lang="ts" setup>
  import { ref } from 'vue'
  import customTabs from '@/components/custom-tabs/custom-tabs.vue'

  // 订单列表组件
  import orderList from './components/order-list.vue'

  // 标签索引值
  const tabIndex = ref(0)
  // 标签页数据
  const orderTabs = ref([
    { label: '问医生', rendered: true },
    { label: '极速问诊', rendered: false },
    { label: '开药问诊', rendered: false },
  ])
  // 监听标签页索引值
  const changeIndex = (index: number) => {
    // console.log('标签页索引值：', index)
    // 点击对应的tab， 渲染对应组件
    orderTabs.value[index].rendered = true
    tabIndex.value = index
  }
</script>

<template>
  <view class="consult-page">
    <view class="consult-status-tabs">
      <custom-tabs :data="orderTabs" @change="changeIndex"></custom-tabs>
    </view>

    <!-- 订单列表 -->
    <view v-for="(item, index) in orderTabs" :key="index" v-show="index === tabIndex">
      <!-- 需要渲染才渲染， 只会第一次加载数据，点击之后rendered变为true，不会重新渲染 -->
      <order-list v-if="item.rendered" :type="(index + 1).toString()" />
    </view>
  </view>
</template>

<style lang="scss"></style>
